<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
	<link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="../assets/css/my-code.css">
	<link href="../assets/css/common-style.css" rel="stylesheet" type="text/css" />
	<link href="../assets/css/basicData.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="../assets/js/bui-min.js"></script>
	<script type="text/javascript" src="../assets/js/config-min.js"></script>
    <title>仓位管理</title>
</head>
<body>
	<div class="container">
		<div class="regionManagementTitle">
			<i class="icon icon-cog"></i> 仓位管理
		</div>
		<div class="row">
			<div class="span24">
				<div>
					<div>
						<div id="tbar" class="area-button"></div>
					</div>
					<div id="warehouse-tree"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		BUI.use(['bui/tree', 'bui/data', 'bui/toolbar', 'bui/editor'],function(Tree, Data, Toolbar, Editor) {
			var store = new Data.TreeStore({
				root: {
					id: '0',
					text: '库房',
					expanded: true,
					getSelected: true
				},
	            pidField : 'id',
	        	url : '../data/shippingSpace.json',
	            autoLoad : true
	        });
			var tree = new Tree.TreeList({
				render: '#warehouse-tree',
				store : store,
				showLine: true,
				dirCls : 'icon-empty',
		        leafCls : 'icon icon-tree-list',
				showRoot : true
			});
			tree.render();
			//默认选中库房
			var firstLeaf = tree.findNode('0'); //获取第一个叶子节点
			tree.setSelected(firstLeaf);
			//tree点击事件
			tree.on('itemclick',function(ev){
		        var item = ev.item;
		        $(".button-box").removeClass("disableBtn");
		        if(item.level==0){
		        	$(".addWarehouse").show();
		        	$(".addShippingSpace").hide();
		        	$(".addShelves").hide();
		        	$(".addLattice").hide();
		        }else if(item.level==1){
		        	$(".addShippingSpace").show();
		        	$(".addWarehouse").hide();
		        	$(".addShelves").hide();
		        	$(".addLattice").hide();
		        }else if(item.level==2){
		        	$(".addShelves").show();
		        	$(".addShippingSpace").hide();
		        	$(".addWarehouse").hide();
		        	$(".addLattice").hide();
		        }else if(item.level==3){
		        	$(".addLattice").show();
		        	$(".addShippingSpace").hide();
		        	$(".addWarehouse").hide();
		        	$(".addShelves").hide();
		        }else{
		        	$(".button-box").addClass("disableBtn");
		        }
		    });
		    
			var store = tree.get('store'),
				editor = new Editor.Editor({
					field: {
						rules: {
							required: true
						}
					},
					autoUpdate: false,
					changeSourceEvent: null
				});
			editor.render();

			editor.on('accept', function() {
				var text = editor.getValue(),
					node = editor.get('curNode');
				node.text = text;
				store.update(node);
			});

			//显示编辑器
			function showEditor(node) {
				var element = tree.findElement(node);
				editor.setValue(node.text);

				editor.set('curNode', node); //缓存当前编辑的记录
				editor.set('align', { //设置对齐
					node: $(element).find('.x-tree-icon-wraper'),
					points: ['tr', 'tl']
				});
				editor.show();
				editor.focus(); //获取焦点
			}

			var bar = new Toolbar.Bar({
				render: '#tbar',
				elCls: 'button-box',
				children: [{
					elCls: 'button-green button-list addWarehouse',
					content: '添加库房 <i class="icon icon-plus icon-white">',
					handler: function() {
						var selectedNode = tree.getSelected(),
							newNode = {
								text: '新增库房'
							};
						newNode = store.add(newNode, selectedNode);
						tree.expandNode(selectedNode);
						showEditor(newNode);
					}
				}, {
					elCls: 'button-green button-list addShippingSpace',
					content: '添加仓位 <i class="icon icon-plus icon-white">',
					handler: function() {
						var selectedNode = tree.getSelected(),
							newNode = {
								text: '新增仓位'
							};
						newNode = store.add(newNode, selectedNode);
						tree.expandNode(selectedNode);
						showEditor(newNode);
					}
				}, {
					elCls: 'button-green button-list addShelves',
					content: '添加货架 <i class="icon icon-plus icon-white">',
					handler: function() {
						var selectedNode = tree.getSelected(),
							newNode = {
								text: '新增货架'
							};
						newNode = store.add(newNode, selectedNode);
						tree.expandNode(selectedNode);
						showEditor(newNode);
					}
				}, {
					elCls: 'button-green button-list addLattice',
					content: '添加层格 <i class="icon icon-plus icon-white">',
					handler: function() {
						var selectedNode = tree.getSelected(),
							newNode = {
								text: '新增层格'
							};
						newNode = store.add(newNode, selectedNode);
						tree.expandNode(selectedNode);
						showEditor(newNode);
					}
				}]
			});
			bar.render();
		});
	</script>
</body>
</html>